Adding Youtube videos to sharepoint with full screen option.

Sharepoint blog posts, strip out html code for security reasons. With web 2.0 who
knows why. So here is a work around.

Step 1)
Find a video on youtube that you want to post, and copy/paste the embed
code into notepad or other text editor. Do not use word, as some of the formatting
may be copied into the Rich Text Editor in sharepoint. Videos from other sites may
work but has not been tested. Code may also need modified for other sites.

Here is what our sample code looks like.

<object width="425" height="344"><param name="movie"

value="http://www.youtube.com/v/W4ZFlfIEBQA;&hl=en;&fs=1"></param><
param name="allowFullScreen" value="true"></param><embed
src="http://www.youtube.com/v/W4ZFlfIEBQA&hl=en&fs=1"
type="application/x-shockwave-flash" allowfullscreen="true" width="425"
height="344"></embed></object>

Looks like confusing, right? To help I have highlighted the code that we need to
recode to post onto sharepoint.

Description of the above.

425 = is the width

344 = is the height
http://www.youtube.com/v/W4ZFlfIEBQA; = is the Video URL
&hl=en; = language selection
&fs=1; = is full screen (1 enabled / 0 disabled)
True = Allow full screen, (True/False) Needs to be true and enabled with above
Now that we know what the code is, it’s time to reformat for posting into sharepoint.

Copy and Paste… ONLY Change the sections with color. The only one that is
really needed is what is highlighted in yellow below. Everything else is optional, but
must be included.

<div id=youtubeSNBS1
align=center>425,355,http://www.youtube.com/v/W4ZFlfIEBQA;&hl=en;&fs=
1,true</div>
In addition to the above code you will notice youtubeXXXX. This “Div id” the X’s can
be anything you chose. Just make sure youtube is part of the id tag otherwise the
script will not know what todo with the code.

&hl=en; and &fs=1; Changes are optional, but is required for posting.

This is what needs to be posted in your blog, via the html source. Copy and pasting
directly into the rich text editor will not work.

Add this code to your post via the HTML source icon .

Note: you will not be able to click on it, unless you first select the body of the post.

Here is a screen shot of the code being added to a blog NEW post.

Here is a screen shot of the same post, only being edited.

Notice how some of the code has changed and &amp; is added wherever & is
added. This is a glitch in Microsoft software and html conversion. It is
 unknown why it does it, just know that it does do this, and your code should
look similar to the above.

Step 2)
You have to ways to modify..

1) Add this code to the very bottom of default.master for your blog section using
a hidden “Content Editor Webpart”. It will display the video on the main
posts page, but not on the page that shows comments.

2) Add the code to the very bottom of your default.master AFTER

</body></html>

a.

Which ever method you decide here is the code.

This is what the code should look like when you copy and paste.

Additional note: 7/29/08

I could not get the code to work when editing default.master for a site. I also had to
add the code to the very bottom of Post.aspx under Posts directory. I am unsure
why, but think it may be due to heavy modifications.
To copy and paste into your sharepoint page.. select all of the below.

<!--
// CCOULSON CUSTOM CODE 07/29/08 - available nowhere else.
// Must be in this fassion
//<div id=youtubeID
align=center>WIDTH,HEIGHT,MOVIEURL,ALLOWFULLSCREEN(true/false),</div>
-->
<script>
<!--
for (var i = 0; i < document.all.length; ++i)
{
if (document.all[i].id.indexOf('youtube') == 0)
{
//get the parameters
var atoms = document.all[i].innerHTML.split(',');
//create the string
var str = '<object width="';
str += atoms[0];
str += '" height="';
str += atoms[1];
str += '"><param name="movie" value="';
str += atoms[2];
str += '" /><param name="allowFullScreen" value="';
str += atoms[3];
str += '" /><embed src="';
str += atoms[2];
str += '" type="application/x-shockwave-flash" allowfullscreen="';
str += atoms[3];
str += '" width="';
str += atoms[0];
str += '" height="';
str += atoms[1];
str += '" /></object"';
//replace it
document.all[i].innerHTML = str;
}
}
//-->
</script>